<!DOCTYPE html>
< lang="en">

{extend name="/index/header"}



{block name="mycss"}
{css  href="__CSS__bootstrap.min.css"}
{css  href="__INDEX__reset.css"}
{css href="__CSS__toastr.min.css"}
{/block}

{block name="main"}
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">

        <div class="container-fluid am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                    <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 表单 <small>Amaze UI</small></div>
                    <p class="page-header-description">Amaze UI 有许多不同的表格可用。</p>
                </div>
                <div class="am-u-lg-3 tpl-index-settings-button">
                    <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>
                </div>
            </div>

        </div>

        <div class="row-content am-cf">


            <div class="row">

                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">添加用户</div>
                            <div class="widget-function am-fr">
                                <a href="javascript:;" class="am-icon-cog"></a>
                            </div>
                        </div>
                        <div class="widget-body am-fr">

                            <form action="/doaddpre" id="form" method="post" class="mt20 h3">
                                <b id="fp">分配节点:</b>br

                                <select name="rid" id="sele"  style="background:black">
                                    {volist  name="list" key="k" id="v" }
                                    <option class="op" value="{$v['id']}">{$v['role_name']}</option>
                                    {/volist}
                                </select>
                            </form>

                            <div id="a">
                            {volist name="res" key="k" id="v"}
                                <input type="checkbox" id="{$v['id']}" value="{$v['id']}" data-name="{$v['pre_name']}" class="nodebox" >
                                {$v['pre_name']}
                            {/volist}

                            </div>


                            <div id="box">

                            </div>


                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

<script>





    //角色遍历 获取选中的到rid
    $(function() {
        var rid =$('#sele').val();
        showRoles(rid);
        $('#sele').change(function(){
            var rid =$('#sele').val()//每次选择都会输出选择的当前option的value
            // console.log(rid);
            showRoles(rid);
        })

    })


    // 根据选中角色的rid查询权限pid
    function showRoles(rid){
        $.ajax({
            method : 'get', // 请求方式
            url : '/showRoles/' + rid, // 路由+ id
            dataType : 'json',
            success : function (data){
                console.log(data)
                // getid(data);
                // 说明成功了
                // 循环添加checked
                // json 是数组
                // 遍历
                $(".nodebox").removeAttr("checked");
                $.each(data,function(key,obj){
                    // console.log(obj.id);// 是每次循环的json条数据
                    $('#'+obj.id).attr('checked','true')
                    $('#'+obj.id).prop('checked',true)

                });


                // 执行修改 把每次循环的obj.id 对应的 input checkbox
                // 修改属性 为 默认选中
                // $#obj.id
//                         实际问题：在使用removeAttr()移除了radio的checked属性后，使用attr()重新增加不起作用；
//     解决：
//     $(":radio").removeAttr('checked');
//                         $("input:radio").prop('checked','true');
//                         即使用prop()可重新配置上该属性；


            },
            error : function() {
                alert('AJAX 执行失败');
            }

        });
    }


    $('.nodebox').click(function(){
        // alert('233')
        var rid =$('#sele').val();
        console.log(rid)

        if($(this).attr('checked')){
            alert('有货要删除')
            $(this).removeAttr('checked')

            var pid = $(this).val()

            $.ajax({
                method : 'post', // 请求方式
                url : '/delpreajax/', // 路由+ id
                data:{'rid':rid,'pid':pid},
                dataType : 'json',
                success : function (){
                    alert('删除权限分配成功')
                },
                error : function() {
                    alert('AJAX 执行失败');
                }
            })

        }else{
            $(this).attr('checked','true')
            var pid = $(this).val()
            console.log($(this));
            alert('没货要加')

            $.ajax({
                method : 'post', // 请求方式
                url : '/addpreajax/', // 路由+ id
                data:{'rid':rid,'pid':pid},
                dataType : 'json',
                success : function (){
                    alert('添加权限成功')
                },
                error : function() {
                    alert('AJAX 执行失败');
                }   
            })


            // alert('没货')
        }


    });




</script>
{block name="myjs"}
{/block}
{/block}
</div>
</div>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/amazeui.datatables.min.js"></script>
<script src="assets/js/dataTables.responsive.min.js"></script>
<script src="assets/js/app.js"></script>




</body>

</html>